<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的小屋</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/modules/code.css}" type="text/css"/>
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script charset="utf-8" th:src="@{/layui-v2.6.4/layui/layui.js}" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <style>
        body {
             /*height: 100%;*/
            /*background: linear-gradient(90deg, #818181, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #C9CACB, #818181);*/
        }
    </style>
</head>
<body th:onload="ready([[${messages}]])">
<div class="layui-fluid" >
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 10px;">

        </div>
<!--        <div class="layui-col-md12 layui-row">-->
<!--            <div class="layui-col-md2" style="font-size: 16px;font-weight: 600;color: #222226;">系统通知</div>-->
<!--        </div>-->
<!--        <div class="layui-col-md10 layui-row" style="height: 13px;"></div>-->
        <div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:1px; background:#E0E0E0;"></div>
        <div th:if="${messages.size()==0}" class="layui-col-md12 layui-row" style="height: 40px;text-align: center;">
            <b style="font-size: 25px;">没有系统消息哦</b>
        </div>
    </div>
</div>
<div>
    <div class="layui-fluid layui-row">
        <div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12"  id="demo1"  style="height: 475px;">

        </div>
        <div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" id="demo20"></div>
    </div>
</div>


<script>
    function del(id){
        layer.confirm('您确定要删除吗？', {
            btn: ['删除','取消'] //按钮
        }, function(){
            $.ajax({
                url:"/delMessage",
                type: 'get'
                , async: false
                , data: {
                    id:id
                }
                , success: function (idd) {
                    layer.msg('删除成功');
                    setTimeout(function (){
                        location.assign("/aaa/"+idd)
                    },1000)
                }
            });
        }, function(){

        });

    }

    function  ready(message) {
        if(message.length==0){

        }else {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage
                    , layer = layui.layer;
                //测试数据
                var data =message
                laypage.render({
                    elem: 'demo20' ,
                    limit: 5
                    , count: data.length
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('demo1').innerHTML = function () {
                            var arr = []
                                , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" ><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 15px;"></div>' +
                                    '<div class="layui-col-md6 layui-col-lg6 layui-col-sm6 layui-col-xs6" ><button  disabled="disabled" class="layui-btn layui-btn-xs layui-btn-primary layui-border-black">系统</button>&nbsp;&nbsp;<span style="color: black; display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;">'+ item.userTime + '</span>	</div>' +
                                    '<div class="layui-col-md6 layui-col-lg6 layui-col-sm6 layui-col-xs6" style="text-align: right;"><i onclick="del('+item.id+')" class="layui-icon layui-icon-close"></i></div><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" style="height: 15px;"></div><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row" style="height: 10px;" style="background-color: #F7F7F7;"><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" style="background-color: #F7F7F7;"><div style="padding: 10px;">' + item.userMessage + '</div><div class="layui-col-md12 layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:1px; background:#E0E0E0;"></div></div>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        }
    }
</script>
</body>
</html>